<div class="modal fade in ip-box" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true" id="edit" *ngIf="initService.init">
    <div class="modal-dialog modal-lg modal-lg-f modal-lg-calc" role="document" *ngIf="details">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" 
                        class="close" 
                        data-dismiss="modal" 
                        aria-hidden="true"
                        (click)="initService._init()"
                        >×
                </button>
                <h4 class="modal-title" id="myModalLabel">应用管理 — 修改</h4>
            </div>
            <form #editForm="ngForm" (ngSubmit)="_onSubmit(editForm.value)">
                <div class="modal-body">
                    <div class="col-xs-12 col-sm-6">

                        <input type="text"
                               name="appId" 
                               class="hide" 
                               #appId="ngModel"
                               [ngModel]="details.result.appId"
                               >

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label text-right">所属机构：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input class="form-control readonly" readonly [value]="app.tree.institutionName">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label text-right">名称：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text"
                                       name="appName"
                                       class="form-control" 
                                       autocomplete="off" 
                                       required
                                       #appName="ngModel"
                                       [ngModel]="details.result.appName"
                                       placeholder="请输入名称"
                                       >
                                <label class="red required">*</label>
                                <div class="error" *ngIf="appName.invalid && (appName.touched)">
                                  <small class="error" *ngIf="appName.errors.required">请输入名称</small>
                                </div>
                            </div>       
                        </div>

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label text-right">唯一标识：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" 
                                       name="appKey"
                                       class="form-control"
                                       readonly  
                                       [ngModel]="details.result.appKey"
                                       >
                            </div>       
                        </div>

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label text-right">密钥：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" 
                                       name="appSecret"
                                       class="form-control" 
                                       readonly
                                       [ngModel]="details.result.appSecret"
                                       >
                            </div>       
                        </div>

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label text-right">应用类型：</label>
                            <div class="col-xs-12 col-sm-9">
                                <select name="appType" 
                                        required 
                                        #appType="ngModel"
                                        [ngModel]="details.result.appType"
                                        >
                                  <option value="0">普通应用</option>
                                  <option value="1">内部站点</option>
                                </select>
                            </div>       
                        </div>
                       
                    </div> 

                    <div class="col-xs-12 col-sm-6">

                        <div class="form-group" [ngStyle]="{ 'height': '40px' }"></div>

                        <div class="form-group ">
                            <label class="col-xs-12 col-sm-3 control-label text-right">URL：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" 
                                     name="appUri"
                                     class="form-control" 
                                     autocomplete="off" 
                                     required 
                                     pattern="(http|ftp|https):\/\/([\w.]+\/?)\S*"
                                     #appUri="ngModel"
                                     [ngModel]="details.result.appUri"
                                     placeholder="请输入url"
                                     >
                                <label class="red required">*</label>
                                <div class="error" *ngIf="appUri.invalid && (appUri.touched)">
                                  <small class="error" *ngIf="appUri.errors.required">请输入URL</small>
                                  <small class="error" *ngIf="appUri.errors.pattern">请输入正确的URL</small>
                                </div>
                            </div>       
                        </div>

                        <div class="form-group ">
                            <label class="col-xs-12 col-sm-3 control-label text-right">IP地址：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" 
                                     name="appIp"
                                     class="form-control" 
                                     autocomplete="off" 
                                     pattern="^[0-9\.\!\|\-\,\*]*$"
                                     #appIp="ngModel"
                                     [ngModel]="details.result.appIp"
                                     placeholder="ip地址"
                                     >
                                <div class="error" *ngIf="appIp.invalid && (appIp.touched)">
                                  <small class="error" *ngIf="appIp.errors.pattern">请输入正确的IP地址</small>
                                </div>
                            </div>       
                        </div>
            
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label text-right" >授权类型：</label>
                            <div class="col-xs-12 col-sm-9">
                              <div class="checkbox">
                                  <input type="checkbox"
                                       name="authType" 
                                       style="margin-left:0;" 
                                       checked 
                                           disabled 
                                       >
                                  <span style="margin-left:16px;">授权码Code</span>
                                </div>
                            </div>       
                        </div>

                        <div class="form-group ">
                            <label class="col-xs-12 col-sm-3 control-label text-right">应用状态：</label>
                            <div class="col-xs-12 col-sm-9">
                                <select name="status"  
                                        required 
                                        #status="ngModel"
                                        [ngModel]="details.result.status"
                                        >
                                  <option value="0">待审核</option>
                                  <option value="1">正常</option>
                                  <option value="2">冻结</option>
                                  <option value="3">逻辑删除</option>
                                  <option value="4">不合格</option>
                                </select>
                            </div>       
                        </div>

                    </div>

                    <div class="col-xs-12 col-sm-12" *ngIf="authType">
                      <div class="form-group">
                            <label class="col-xs-12 col-sm-2 control-label text-right">许可类型：</label>
                            <div class="col-xs-12 col-sm-10" style="padding:8px 0 0 20px;">
                              
                                <div class="margin-top-zero checkbox col-xs-12 col-sm-3" *ngFor="let val of authType">
                                    <input type="checkbox"
                                           name="authType" 
                                           #need
                                           [checked]="val.isSelect"
                                           [value]="val.sysValue"
                                           (click)="_grantType(need.value, need.checked)"
                                           >
                                    <span>{{ val.displayName }}</span>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12" *ngIf="scopes">
                    
                        <div class="form-group">
                            
                            <label class="col-xs-12 col-sm-2 control-label text-right">授权范围：</label>

                            <div class="col-xs-12 col-sm-10">

                                <fieldset class="field" *ngFor="let val of scopes">
                                    <legend>
                                        <!-- <input type="checkbox" disabled> -->
                                        <span>{{ val.serviceTypeName }}</span>
                                    </legend>
                                    <div style="padding-left:30px">
                                        <div class="col-xs-6 col-sm-4" *ngFor="let voVal of val.scopesTypeVo">
                                            <input type="checkbox"
                                                   name="scope" 
                                                   #need
                                                   [checked]="voVal.isSelect"
                                                   [value]="voVal.scopesCode"
                                                   (click)="_scope(need.value, need.checked)"
                                                   >
                                            <span>{{ voVal.scopeName }}</span>
                                        </div>
                                    </div>
                                </fieldset>

                            </div>

                        </div>

                    </div>
                    
                    <div class="col-xs-12 col-sm-12">


                        <div class="form-group" >
                            <label class="col-xs-12 col-sm-2 control-label text-right">上传图片：</label>
                            <div class="col-xs-12 col-sm-10">
                                  
                                <fieldset>
                                
                                    <div id="uploadForm" enctype='multipart/form-data'>     

                                        <div class="fileinput fileinput-new" data-provides="fileinput" id="exampleInputUpload">

                                           

                                            <div>

                                                <span class="btn btn-primary btn-file">
                                                    <span class="fileinput-new"><span class="glyphicon glyphicon-picture"></span> 选择图片</span>
                                                    <span class="fileinput-exists"><span class="glyphicon glyphicon-transfer"></span> 换一张</span>
                                                    <input type="file" 
                                                           name="imageinfo" 
                                                           id="picID2" 
                                                           accept="image/gif,image/jpeg,image/x-png"
                                                           >
                                                </span>

                                                <a href="javascript:;" 
                                                   class="btn btn-warning fileinput-exists" 
                                                   data-dismiss="fileinput"
                                                   ><span class="glyphicon glyphicon-trash"></span> 移除
                                                </a>

                                            </div>
                                            <div class="fileinput-new thumbnail">
                                                <img class="show-img" [src]="details.result.appImage">
                                            </div>

                                            <div class="fileinput-preview fileinput-exists thumbnail"></div>
                                            
                                        </div>
                                    
                                    </div>

                                </fieldset>

                            </div>   
                        </div>

                    </div>

                    <div class="col-xs-12 col-sm-12">
                      <div class="form-group">
                            <label class="col-xs-12 col-sm-2 control-label text-right">简介：</label>
                            <div class="col-xs-12 col-sm-10">
                                <textarea rows="5" 
                                      type="text" 
                                      name="appSummary" 
                                      class="form-control" 
                                      #appSummary
                                      [ngModel]="details.result.appSummary"
                                      >                                    
                                </textarea>
                                
                            </div>
                      </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-fff" 
                            data-dismiss="modal" 
                            type="button"
                            (click)="initService._init()"
                            >取消
                    </button>
                    <button type="submit" 
                            class="btn btn-primary" 
                            [disabled]="editForm.invalid||hasCheckbox"
                            ><span class="glyphicon glyphicon-pencil"></span> 修改
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
